

<template>
  <div class="container">
    <div class="search-div">
      <div style="margin: 20px 0;">
        <el-row>
          <el-col span="2">
            <el-button type="text" style="color: black" size="mini">所选科目 :</el-button>
          </el-col>

          <el-col span="4">
            <el-checkbox-group
                v-model="mainSubjects"
                :min="0"
                :max="1">
              <el-checkbox v-for="subject in mainSubjectArr" :label="subject" :key="subject">{{subject}}</el-checkbox>
            </el-checkbox-group>
          </el-col>

          <el-col span="8">
            <el-checkbox-group
                v-model="subjects"
                :min="0"
                :max="2">
              <el-checkbox v-for="subject in subjectArr" :label="subject" :key="subject">{{subject}}</el-checkbox>
            </el-checkbox-group>
          </el-col>

        </el-row>

        <el-row>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">高考分数 :</el-button>
          </el-col>
          <el-col span="6">
            <el-input-number  v-model="paramData.score"  placeholder="请输入高考分数" size="mini" style="width: 50%"></el-input-number>
          </el-col>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">高考位次 :</el-button>
          </el-col>
          <el-col span="6">
            <el-input-number  v-model="paramData.rank" placeholder="请输入高考分数" size="mini" style="width: 50%"></el-input-number>
          </el-col>

          <el-col span="3">
            <el-button size="mini" type="primary" @click="predictData">点击预测</el-button>
          </el-col>
        </el-row>
        <br>
        <el-row>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">个人性格 :</el-button>
          </el-col>

          <el-col span="15">
            <el-select size="mini" v-model="xgs" prefix-icon="el-icon-edit" clearable filterable style="width: 100%">
              <el-option v-for="xg in xgArr" :key="xg" :value="xg" :label="xg"></el-option>
            </el-select>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">意向城市 :</el-button>
          </el-col>
          <el-col span="15">
            <el-row>
              <el-col v-for="i in yuanxiaoArr" :key="i" span="2">
                <el-button size="mini" type="text" :class="{ yuanxiao, active: yuanxiao === i }" @click="setYuanxiao(i)">{{i}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">历年同位分 :</el-button>
          </el-col>
          <el-col span="15">
            <el-row>
              <el-col v-for="i in yxtsArr" :key="i" span="3">
                <el-button size="mini" type="text" :class="{ yuanxiao }">{{i}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

        <el-row>
          <el-col span="2">
            <el-button size="mini" type="text" style="color: black">预测标准 :</el-button>
          </el-col>
          <el-col span="15">
            <el-row>
              <el-col v-for="i in predictArr" :key="i" span="3">
                <el-button size="mini" type="text" :class="{ yuanxiao,  active: predictStandard === i }" @click="setStandard(i)">{{i}}</el-button>
              </el-col>
            </el-row>
          </el-col>
        </el-row>

      </div>
      <el-divider></el-divider>
      <div style="padding: 0 40px">
        <el-card class="box-card" v-for="item in pageList" :key="item.id">
          <div style="padding: 10px; height: 80px">
            <el-row>
              <el-col span="4">
                <el-avatar :size="80" src="https://empty" @error="errorHandler">
                  <img :src="item.schoolData.icon"/>
                </el-avatar>
              </el-col>
              <el-col span="20">
                <el-row style="height: 30px; line-height: 30px">
                  <el-col span="13">
                    <div style="font-size: large"><font color="#ff4500">{{item.schoolData.name}}</font></div>
                  </el-col>
                  <el-col span="3">
                    <el-tag type="info">{{item.schoolData.address}}</el-tag>
                  </el-col>
                  <el-col span="4">
                    <el-tag type="primary">
                      <el-link type="primary" :underline="false" style="font-size: 12px" :href="item.schoolData.website" target="_blank">学校官网</el-link>
                    </el-tag>
                  </el-col>
                  <el-col span="2">
                    <el-tag type="warning">
                      <el-link type="primary" :underline="false" style="font-size: 12px" @click="showProfessorRatio(item)">专业录取率</el-link>
                    </el-tag>
                  </el-col>
<!--                  <el-col span="4">-->
<!--                    <el-tag effect="dark" v-if="item.ratio >= 0.95" type="success" >概率极大 </el-tag>-->
<!--                    <el-tag effect="dark" v-else-if="item.ratio >= 0.7" type="warning" > 概率大 </el-tag>-->
<!--                    <el-tag effect="dark" v-else-if="item.ratio >= 0.4"  > 概率中 </el-tag>-->
<!--                    <el-tag effect="dark" v-else-if="item.ratio >= 0.05" type="danger" > 概率小 </el-tag>-->
<!--                    <el-tag effect="dark" v-else type="info"> 概率极小 </el-tag>-->
<!--                  </el-col>-->
<!--                  <el-col span="2">-->

<!--                  </el-col>-->
                </el-row>
                <el-row style="height: 30px; line-height: 30px; font-size: large;">
                  <div style="padding: 20px 0 0 0">
                    <span>{{item.schoolData.level}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{item.schoolData.type}}</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>{{item.schoolData.attr || ''}}</span>
                    <el-divider v-if="item.schoolData.attr" direction="vertical"></el-divider>
                    <span>强基计划</span>
                    <el-divider direction="vertical"></el-divider>
                    <span>最低分/最低位次  {{item.lowerScore}} / {{item.lowerRank}}</span>
                  </div>
                </el-row>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </div>
      <div style="margin: 10px">
        <el-pagination
            background
            :current-page.sync="pageParam.page"
            @current-change="changePage"
            layout="prev, pager, next"
            :total="pageParam.total">
        </el-pagination>
      </div>
    </div>

<!--   专业录取概率弹窗 -->
    <el-dialog title="专业录取概率" :visible.sync="dialogTableVisible">
      <el-table :data="gridData">
        <el-table-column property="professor.professorName" label="专业名称" ></el-table-column>
        <el-table-column property="professor.lowerScore" label="最低投档分" ></el-table-column>
        <el-table-column property="professor.level" label="类型"></el-table-column>
        <el-table-column property="ratio" label="录取概率">
          <template slot-scope="scope">
            <el-tag effect="dark" v-if="scope.row.ratio >= 0.95" type="success" >  {{scope.row.ratio.toFixed(2)}}  </el-tag>
            <el-tag effect="dark" v-else-if="scope.row.ratio >= 0.7" type="warning" >  {{scope.row.ratio.toFixed(2)}} </el-tag>
            <el-tag effect="dark" v-else-if="scope.row.ratio >= 0.4"  >  {{scope.row.ratio.toFixed(2)}} </el-tag>
            <el-tag effect="dark" v-else-if="scope.row.ratio >= 0.05" type="danger" >  {{scope.row.ratio.toFixed(2)}} </el-tag>
            <el-tag effect="dark" v-else type="info">  {{scope.row.ratio.toFixed(2)}} </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script >

import {predictList} from "@/api/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: 'Simulation',
  data() {
    return {
      dialogTableVisible: false,
      gridData: [],
      dataList: [],
      pageList: [],
      xgs: '',
      xgArr: [
        'ISTJ - 谨慎稳重型',
        'ISFJ - 守护者型',
        'INFJ - 指导者型', 'INTJ - 架构师型', 'ISTP - 冒险家型', 'ISFP - 艺术家型', 'INFP - 诗人型', 'INTP - 思想家型',
        'ESTP - 开拓者型', 'ESFP - 表演者型', 'ENFP - 公关型', 'ENTP - 挑战者型', 'ESTJ - 管理者型', 'ESFJ - 主人型', 'ENFJ - 教师型',
        'ENTJ - 领袖型'
      ],
      pageParam: {
        page: 1,
        size: 10,
        total: 0,
      },
      paramData: {
        subject: '',
        score: '',
        rank: '',
        city: '',
        standard: '按照分数预测'
      },
      mainSubjects: [],
      mainSubjectArr:[
        '物理', '历史'
      ],
      subjects: [],
      subjectArr: [
        '化学', '生物', '历史', '地理'
      ],
      yuanxiao: '全部',
      yuanxiaoArr: [
        "全部", "北京", "天津", "河北", "山西", "内蒙古", "辽宁", "吉林", "黑龙江", "上海", "安徽", "浙江", "江苏" , "福建",
        "江西", "山东", "河南", "湖北", "湖南", "广东", "广西", "海南", "重庆", "四川", "贵州", "云南" , "西藏",
        "陕西", "甘肃", "青海", "宁夏", "新疆", "香港", "澳门", "台湾"
      ],
      yxtsArr: [],
      predictStandard: '按照分数预测',
      predictArr: ['按照分数预测', '按照排名预测'],
    }
  },

  methods: {

    showProfessorRatio(item) {
      console.log(item)
      this.gridData = item.professorsList
      this.dialogTableVisible = true
    },

    setYuanxiao(yx) {
      this.yuanxiao = yx
      if (this.yuanxiao === '全部') {
        this.paramData.city = '';
      } else {
        this.paramData.city = yx;
      }
    },

    setStandard(yx) {
      this.predictStandard = yx
      this.paramData.standard = yx
    },

    changePage(page) {
      this.pageParam.page = page;
      const start = ( this.pageParam.page - 1) * this.pageParam.size;
      const end = start + this.pageParam.size;
      this.pageList = this.dataList.slice(start, end);
    },

    predictData(){
      if (this.mainSubjects.length === 0) {
        this.$message.error("请选择主科目")
        return
      }
      if (this.subjects.length !== 2) {
        this.$message.error("请选择次科目")
        return
      }
      if (this.mainSubjects[0] === '物理') {
        this.paramData.subject = '理科'
      } else {
        this.paramData.subject = '文科'
      }


      predictList(this.paramData).then(res => {
        console.log(res)
        this.dataList = res.data
        for (let i = 0; i < this.dataList.length; i++) {
          const items = this.dataList[i].schoolData
          items.icon = "http://localhost:8085/upload/" + encodeURIComponent(items.icon)
        }
        this.pageList = this.dataList.slice(0, 10);
        this.pageParam.total = this.dataList.length
      })
    }
  }
}
</script>

<style scoped>
.yuanxiao {
  color: black;
}

.active {
  color: #ff5600;
}
</style>